/**
 * Created by hpwu on 2015/5/8.
 */
@charset "utf-8";

.bg{
    min-width: 1000px;
    width: 100%;
    height: 100%;
    position: fixed;
    z-index: 1;
}

.slider{
    min-width: 1000px;
    position: absolute;
    z-index: 50;
    width: 100%;
    height: 30%;
    top: 70%;
    text-align: center;
    margin: auto;
    /*border: 1px salmon solid;*/
}
.slider li{
    list-style: none;
    display: inline-block;
    height: 220px;
    width: 10%;
    border: 2px solid white;
    border-radius: 10%;
    margin: 3%;
    text-align: left;
    vertical-align: bottom;
}

.slider li:nth-of-type(1){
    background: #02646e;
}


.slider li:nth-of-type(2){
    background: #eb0837;
}


.slider li:nth-of-type(3){
    background: #e6674a;
}


.slider li:nth-of-type(4){
    background: #67b374;
}


.slider li:nth-of-type(5){
    background: #e61061;
}

.slider li a{
    display: inline-block;
    text-decoration: none;
    font-family: '微软雅黑';
    color: white;
    font-size: 2em;
    word-break: break-all;
    z-index: 100;
}


.slider li a::after, .slider li a::before{
    content: "";
    position: absolute;
    top: -18%;
    height: 120px;
    width: 120px;
    border: 3px solid white;
    border-radius:50%;
    margin-left: 2%;
    display: block;

}

.slider li:nth-of-type(1) a::after{
    background: url(../img/sbg1.jpg) no-repeat center;
}
.slider li:nth-of-type(2) a::after{
    background: url(../img/sbg2.jpg) no-repeat center;
}
.slider li:nth-of-type(3) a::after{
    background: url(../img/sbg3.jpg) no-repeat center;
}
.slider li:nth-of-type(4) a::after{
    background: url(../img/sbg4.jpg) no-repeat center;
}
.slider li:nth-of-type(5) a::after{
    background: url(../img/sbg5.jpg) no-repeat center;
}


.slider li a::before{
    z-index: 200;
    background: black;
    opacity: .4;
}

.slider li a:hover::before{
    opacity: 0;
}

.slider li:hover{
    animation: shake 4s ease-in-out;
    -moz-animation: shake 4s ease-in-out;
    -webkit-animation: shake 4s ease-in-out;
}
#bg1:target{
    z-index: 10;
    animation: shake 100ms ease-in-out;
    -moz-animation: shake 100ms ease-in-out;
    -webkit-animation: shake 100ms ease-in-out;
}
@keyframes shake {
    from{transform: rotate(0deg)}
    10%{transform: rotate(20deg)}
    20%{transform: rotate(-20deg)}
    30%{transform: rotate(20deg)}
    40%{transform: rotate(-20deg)}
    50%{transform: rotate(20deg)}
    60%{transform: rotate(-20deg)}
    70%{transform: rotate(20deg)}
    80%{transform: rotate(-20deg)}
    90%{transform: rotate(-20deg)}
    to{transform: rotate(0deg)}
}

@-webkit-keyframes shake {
    from{-webkit-transform: rotate(0deg)}
    10%{-webkit-transform: rotate(20deg)}
    20%{-webkit-transform: rotate(-20deg)}
    30%{-webkit-transform: rotate(20deg)}
    40%{-webkit-transform: rotate(-20deg)}
    50%{-webkit-transform: rotate(20deg)}
    60%{-webkit-transform: rotate(-20deg)}
    70%{-webkit-transform: rotate(20deg)}
    80%{-webkit-transform: rotate(-20deg)}
    90%{-webkit-transform: rotate(-20deg)}
    to{-webkit-transform: rotate(0deg)}
}
@-moz-keyframes shake {
    from{-moz-transform: rotate(0deg)}
    10%{-moz-transform: rotate(20deg)}
    20%{-moz-transform: rotate(-20deg)}
    30%{-moz-transform: rotate(20deg)}
    40%{-moz-transform: rotate(-20deg)}
    50%{-moz-transform: rotate(20deg)}
    60%{-moz-transform: rotate(-20deg)}
    70%{-moz-transform: rotate(20deg)}
    80%{-moz-transform: rotate(-20deg)}
    90%{-moz-transform: rotate(-20deg)}
    to{-moz-transform: rotate(0deg)}
}
.bg:not(:target){
    z-index: -1;
}
